<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="root">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>
</body>
<script>
	Vue.prototype.bus = new Vue();
	Vue.component("child", {
		props: {
			content: String
		},
		data: function(){
			return {
				selfContent: this.content
			}
		},
		template: '<div @click="handleChildClick">{{selfContent}}</div>',
		methods: {
			handleChildClick: function(){
				// alert(this.content);
				this.bus.$emit("change",this.selfContent);
			}
		},
		mounted: function(){
			var this_ = this;
			this.bus.$on("change",function(msg){
				this_.selfContent = msg;
			})
		}
	})
	var vm = new Vue({
		el: "#root"
	})
</script>

</html>
